<template>
  <div class="registry">
    <van-nav-bar
      left-arrow
      fixed
      placeholder
      :border="false"
      @click-left="onClickLeft"
    />
    <div class="r-form">
      <p class="titletel">手机号码注册</p>
      <van-cell-group inset>
        <!-- 输入手机号，调起手机号键盘 -->
        <van-field
          v-model="tel"
          type="number"
          label="手机号"
          maxlength="11"
          placeholder="请输入11位手机号码"
          :clearable="true"
          @blur="onblurtel"
        />
        <!-- 输入密码 -->
        <van-field
          v-model="password"
          :type="type"
          label="密码"
          placeholder="请输入6-14位以内密码"
          maxlength="14"
          :clearable="true"
          @blur="onblurpass"
        >
          <template #right-icon>
            <van-icon :name="icont" @click="chengtype"></van-icon>
          </template>
        </van-field>
        <van-field
          v-model="msg"
          type="number"
          maxlength="6"
          center
          clearable
          label="短信验证"
          placeholder="请输入验证码"
          @input="onblurmsg"
        >
          <template #button>
            <van-button
              size="small"
              type="primary"
              :disabled="btntype"
              @click="sendmessge"
            >
              {{ msgtext }}
            </van-button>
          </template>
        </van-field>
        <van-button
          round
          block
          color="#FFD102"
          native-type="button"
          class="submit"
          @click="subregedit"
          :disabled="submittype"
        >
          注册
        </van-button>
      </van-cell-group>
    </div>
    <div class="footer">
      <div class="elselogin">
        <p>
          <img
            src="https://i.loli.net/2021/07/18/9WtKrm1Xadijfon.png"
            alt=""
            @click="failtoast"
          /><img
            src="https://i.loli.net/2021/07/18/KsurWdtwImQp3yn.png"
            alt=""
            @click="failtoast"
          /><img
            src="https://i.loli.net/2021/07/18/e4KzadkTmijnQcv.png"
            alt=""
            @click="failtoast"
          />
        </p>
      </div>
      <p>登录即表示您已同意</p>
      <p>
        <a is-link @click="showPopup">樊登读书用户服务协议</a>及<a
          is-link
          @click="showPopup"
          >隐私政策</a
        >、<a is-link @click="showPopup">中国电信认证服务条款</a>
        <van-popup
          v-model:show="show"
          position="left"
          :style="{ height: '100%', width: '100%' }"
          closeable
          close-icon-position="top-left"
          close-icon="arrow-left"
        >
          <van-nav-bar fixed placeholder :border="false" />
          <div class="yinsitiaokuan">
            <h3>隐私条款</h3>
            <p>
              樊登读书非常重视对您的个人隐私保护，有时候我们需要某些信息才能为您提供您请求的服务，本隐私政策解释了这些情况下的数据收集和使用情况。
            </p>
            <p>
              本政策适用于樊登读书的所有相关服务，随着樊登读书服务范围的扩大，隐私政策的内容可由樊登读书随时更新，且毋须另行通知。更新后的隐私政策一旦在网页上公布即有效代替原来的隐私政策。
              我们收集哪些信息
            </p>
            <p>
              通常，您能在匿名的状态下访问樊登读书并获取信息。当我们需要能识别您的个人信息或者可以与您联系的信息时，我们会征求您的同意。
            </p>
            <p>
              通常，在您注册樊登读书或申请开通新的功能时，我们可能收集这些信息：
            </p>
            <p>
              姓名、E-mail地址、住址和电话号码，并征求您的确认。
              关于您的个人信息樊登读书严格保护您个人信息的安全。
            </p>
            <p>
              我们使用各种安全技术和程序来保护您的个人信息不被未经授权的访问、使用或泄漏。
              樊登读书会在法律要求或符合樊登读书的相关服务条款、软件许可使用协议约定的情况下透露您的个人信息，或者有充分理由相信必须这样做才能：
            </p>
            <p>
              (a)满足法律或行政法规的明文规定，或者符合樊登读书站适用的法律程序；
              (b)符合樊登读书相关服务条款、软件许可使用协议的约定；
              (c)保护樊登读书的权利或财产；
              (d)在紧急情况下保护樊登读书员工、樊登读书产品或服务的用户或大众的个人安全；
            </p>
            <p>
              樊登读书不会未经您的允许将这些信息与第三方共享，本政策已经列出的上述情况除外。
              Cookie的使用 使用 Cookie
            </p>
            <p>
              能帮助您实现您的联机体验的个性化，您可以接受或拒绝 Cookie ，大多数
              Web 浏览器会自动接受
            </p>
            <p>
              Cookie，但您通常可根据自己的需要来修改浏览器的设置以拒绝 Cookie。
              樊登读书有时会使用 Cookie
            </p>
            <p>
              以便知道哪些网站受欢迎，使您在访问樊登读书时能得到更好的服务。Cookie不会跟踪个人信息。
              当您注册樊登读书时，樊登读书亦会使用
            </p>
            <p>
              Cookie。在这种情况下，樊登读书会收集并存储有用信息，当您再次访问樊登读书时，我们可辨认您的身份。来自樊登读书的
            </p>
            <p>
              Cookie 只能被樊登读书读取。 如果您的浏览器被设置为拒绝
              Cookie，您仍然能够访问樊登读书的大多数网页。
            </p>
          </div>
        </van-popup>
      </p>
    </div>
  </div>
</template>

<script>
import { ref, watch } from "vue";
import { useRouter } from "vue-router";
import { Toast, Dialog, Notify } from "vant";
import {
  postRegeditApi,
  postRegedittelApi,
  getRegeditMessgeApi,
  getSendMessgeApi,
} from "../utils/loginapi";
export default {
  setup() {
    const tel = ref("");
    const password = ref("");
    const msg = ref("");

    // 隐私政策弹窗
    const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };
    // 路由跳转
    const $router = useRouter();
    const onClickLeft = () => {
      $router.go(-1);
    };
    // 事件函数
    // 改变密码显示
    const type = ref("password");
    const icont = ref("closed-eye");
    const chengtype = () => {
      type.value = type.value === "text" ? "password" : "text";
      icont.value = icont.value === "eye-o" ? "closed-eye" : "eye-o";
    };
    // 注册操作a
    const btntype = ref(true); //禁用按钮的开关
    // 监听手机号码，打开验证码开关
    watch(tel, (newtel) => {
      if (newtel !== "") {
        btntype.value = false;
      } else {
        btntype.value = true;
      }
    });

    // 失去焦点判断手机号码
    const telflag = ref(false);
    const onblurtel = () => {
      // 正则判断
      const reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
      if (reg.test(tel.value)) {
        var len = tel.value.length;
        if (len === 11) {
          // 验证手机号码是否存在
          postRegedittelApi({ usertel: tel.value }).then((res) => {
            if (res.status === 2) {
              Notify({ type: "danger", message: "手机号码已存在" });
            } else {
              Notify({ type: "success", message: "手机号码格式正确" });
              telflag.value = true;
            }
          });
        } else {
          Notify({ type: "danger", message: "请输入正确手机号" });
          telflag.value = false;
          btntype.value = true;
        }
      } else {
        Notify({ type: "danger", message: "请输入正确手机号" });
        telflag.value = false;
        btntype.value = true;
      }
    };
    // 失去焦点判断密码
    const passwordflag = ref(false);
    const onblurpass = () => {
      var len = password.value.length;
      if (len >= 8 && len <= 14) {
        Notify({ type: "success", message: "密码格式正确" });
        passwordflag.value = true;
      } else {
        Notify({ type: "danger", message: "密码格式有误" });
        passwordflag.value = false;
      }
    };
    // 发送验证码事件
    // 发送验证码
    const msgtext = ref("发送验证码");
    const msgnum = ref(1);
    const num = ref(15); //间隔倒计时
    const sendmessge = () => {
      // 点击后禁止再次点击
      btntype.value = true;
      if (msgnum.value <= 5) {
        msgnum.value++;
      } else {
        msgnum.value = 1;
      }
      // 发送验证码
      getRegeditMessgeApi({ msgnum: msgnum.value }).then((res) => {
        if (res.status === 0) {
          //请求成功
          const timer = setInterval(() => {
            num.value--;
            msgtext.value = num.value + "s";
            if (num.value === 0) {
              clearInterval(timer); //清除定时器
              btntype.value = false;
              num.value = 15;
              msgtext.value = "再次发送";
            }
          }, 1000);
          Toast.success("发送成功");
          setTimeout(() => {
            Dialog.alert({
              title: "来自10006900242342344的短信",
              message:
                "尊敬的【樊登读书】用户，您本次的短信验证码是:" +
                res.messges +
                ",有效时间为15分钟。",
            });
          }, 2000);
        }
        console.log(res.messges);
      });
    };
    // 验证验证码
    const msgflag = ref(false);
    const onblurmsg = () => {
      getSendMessgeApi({ messges: msg.value, msgnum: msgnum.value }).then(
        (res) => {
          if (res.status === 0) {
            Notify({ type: "success", message: "验证码正确" });
            msgflag.value = true;
          } else {
            Notify({ type: "danger", message: "验证码错误" });
            msgflag.value = false;
          }
        }
      );
    };
    // 提交注册事件
    const submittype = ref(true); //提交按钮开关
    // 监听是否都正确
    watch([telflag, passwordflag, msgflag], ([newtel, newpass, newmsgs]) => {
      if (newtel && newpass && newmsgs) {
        submittype.value = false;
      } else {
        submittype.value = true;
      }
    });
    const subregedit = () => {
      const randomname = parseInt(Math.random() * 100000);
      postRegeditApi({
        usertel: tel.value,
        password: password.value,
        username: "FD-" + randomname,
        userimg: "https://i.loli.net/2021/07/21/xIuMA2gGVWLUwaX.png",
      }).then((res) => {
        if (res.status === 0) {
          Toast("注册成功");
          setTimeout(() => {
            $router.push("/Login/?tel=" + tel.value);
          }, 2000);
        } else if (res.status === 2) {
          Notify({ type: "danger", message: "手机号码已存在" });
        } else {
          Notify({ type: "danger", message: "数据错误" });
        }
      });
    };
    const failtoast = () => {
      Toast("暂不支持");
    };
    return {
      tel,
      password,
      msg,
      show,
      showPopup,
      onClickLeft,
      $router,
      chengtype,
      type,
      icont,
      sendmessge,
      onblurtel,
      onblurpass,
      onblurmsg,
      subregedit,
      msgtext,
      num,
      btntype,
      submittype,
      watch,
      failtoast,
    };
  },
};
</script>

<style lang="less">
:root {
  --van-nav-bar-icon-color: #000;
  --van-nav-bar-arrow-size: 15px;
}
.registry {
  .titletel {
    font-size: 29px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    line-height: 29px;
    margin: 28px;
  }
  .r-form {
    padding: 0 28px;
    .van-cell-group {
      margin: 0;
      .van-field {
        border-bottom: 1px solid #e2e1e0;
      }
      .van-cell__title {
        max-width: 60px;
      }
      .van-button--small {
        width: 78px;
      }
    }
    .submit {
      margin-top: 40px !important;
    }
  }
  .footer {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 20px;
    font-size: 13px;
    color: #9d9d9d;
    .elselogin {
      width: 332px;
      padding: 0 20px;
      margin: auto;
      p {
        font-size: 14px;
        margin: 30px 0;
        display: flex;
        justify-content: space-between;
        img {
          height: 18px;
        }
      }
    }
    p {
      height: 20px;
      a {
        color: #ffd102 !important;
      }
    }
    .yinsitiaokuan {
      padding: 0 10px;
      p {
        height: auto;
        line-height: 20px;
        text-align: left;
        text-indent: 2em;
      }
    }
  }
}
</style>
